const tbody = document.querySelector('tbody');
//封装获取学员数据的函数
function getStudent() {
    axios.get('/student/list').then(result => {
        if (result.data.code === 0) {
            const html = result.data.data.reduce((h, v) =>

                h + `<tr>
                <th scope="row">${v.id}</th>
                <td>${v.name}</td>
                <td>${v.sex}</td>
                <td>${v.age}</td>
                <td>${v.group}</td>
                <td>${v.phone}</td>
                <td>${v.salary}</td>
                <td>${v.truesalary}</td>
                <td>${v.province}${v.city}${v.county}</td>
                <td>
                  <button type="button" class="btn btn-primary btn-sm updateModal" data-id='${v.id}'>修改</button>
                  <button type="button" class="btn btn-danger btn-sm deleteModal" data-id='${v.id}'>删除</button>
                </td>
              </tr>`, ''
            )
            tbody.innerHTML = html
        }
    })
}
//获取学员
getStudent()
//新增学员
const addForm = document.querySelector('#addModal form')
addForm.addEventListener('submit', function (e) {
    e.preventDefault()
    const data = $(addForm).serialize()
    axios.post('/student/add', data).then(result => {
        if (result.data.code === 0) {
            toastr.success(result.data.message)
            addForm.reset()
            $(addModal).modal('hide')
            getStudent()
        }
    })
})
initSelect('#addModal')
//封装渲染籍贯下拉列表
function getSelect(url, params, getHTML, label, value = '') {
    axios.get(url, { params }).then(result => {
        const html = result.data.reduce((h, v) =>
            h + ` <option value="${v}">${v}</option>`, `<option value="">--${label}--</option>`
        )
        getHTML.innerHTML = html
        getHTML.value = value
    })

}
//初始化籍贯下拉列表
function initSelect(selector) {
    //获取省份、市、区
    const getProvince = document.querySelector(`${selector} [name=province]`)
    const getCity = document.querySelector(`${selector} [name=city]`)
    const getCounty = document.querySelector(`${selector} [name=county]`)
    //在省的下拉列表中渲染数据
    getSelect('/geo/province', '', getProvince, '省')
    //在市的下拉列表中渲染数据
    getProvince.addEventListener('change', function (e) {
        getSelect('/geo/city', { pname: getProvince.value }, getCity, '市')

    })
    //在县的下拉列表中渲染数据
    getCity.addEventListener('change', function (e) {
        getSelect('/geo/county', { pname: getProvince.value, cname: getCity.value }, getCounty, '县')
    })
}
initSelect('#updateModal')
//编辑表单
tbody.addEventListener('click', function (e) {
    const dom = e.target
    if (dom.classList.contains('updateModal')) {
        $('#updateModal').modal('show')
        const id = dom.dataset.id
        axios.get('/student/one', { params: { id } }).then(result => {
            const obj = result.data.data
            for (const key in obj) {
                const inputValues = document.querySelector(`#updateModal [name=${key}]`)
                if (key === 'sex') {
                    document.querySelector(`#updateModal [name=sex][value=${obj[key]}`).checked = true
                    continue
                }
                if (inputValues) {
                    inputValues.value = obj[key]
                    //获取市                   
                    getSelect('/geo/city', { pname: obj.province }, document.querySelector('#updateModal [name=city]'), '市', obj.city)
                    //获取县
                    getSelect('/geo/county', { pname: obj.province, cname: obj.city }, document.querySelector('#updateModal [name=county]'), '县', obj.county)
                }
            }
        })
    }
    //删除学员功能
    else if (dom.classList.contains('deleteModal')) {
        const id = dom.dataset.id
        axios.delete('/student/delete', { params: { id } })
            .then(result => {
                if (result.data.code === 0) {
                    toastr.success(result.data.message)
                    getStudent()
                }
            })
    }

})
//修改数据渲染页面 编辑学员类似新增学员
const updateForms = document.querySelector('#updateModal form')
updateForms.addEventListener('submit', function (e) {
    e.preventDefault()
    const data = $(updateForms).serialize()
    axios.put('/student/update', data).then(result => {
        if (result.data.code === 0) {
            toastr.success(result.data.message)
            updateForms.reset()
            $(updateModal).modal('hide')
            getStudent()
        }
    })
})



